<template>
	<view class="event-container">
		<view style="padding: 20rpx;">
			<view class="toast-top">
				<view class="flex">
					<text style="color: red;">*</text>
					<view class="desc">考核工作</view>
				</view>
			</view>
			<view @click="handleTap('picker')" class="c-input">
				<text :class="{color: label === '请选择考核工作'}">{{label}}</text>
				<lb-picker ref="picker" @click="handleTap('picker')" v-model="params['考核id']" mode="selector" :list="assessList"
					:dataset="{ name: 'label' }" @confirm="handleConfirm" @cancel="handleCancel">
				</lb-picker>
			</view>
			<view class="toast-top">
				<view class="flex">
					<text style="color: red;">*</text>
					<view class="desc">报表类型</view>
				</view>
			</view>
			<view class="tag-box">
				<view @click="changeType(0)" :class="{'active': currentIndex == 0}" class="tag-item">月度</view>
				<view @click="changeType(1)" :class="{'active': currentIndex == 1}" class="tag-item">季度</view>
				<view @click="changeType(2)" :class="{'active': currentIndex == 2}" class="tag-item">年度</view>
			</view>
			<!-- <view @click="handleTap('picker1')" class="c-input">
				<text :class="{color: label === '请选择报表类型'}">{{label}}</text>
				<lb-picker ref="picker1" @click="handleTap('picker1')" v-model="params1['考核id']"
				 mode="selector" :list="typeList" :dataset="{ name: 'label' }" @confirm="handleConfirm" @cancel="handleCancel">
				</lb-picker>
			</view> -->
			<view class="toast-top">
				<view class="flex">
					<text style="color: red;">*</text>
					<view class="desc">时间选择</view>
				</view>
			</view>
			<view @click="handleTap('picker1')" class="c-input">
				<text :class="{color: label1 === '请选择时间范围'}">{{label1}}</text>
				<lb-picker ref="picker1" v-model="value1" @click="handleTap('picker1')" :mode="modeType[currentIndex]"
					:level="levelType[currentIndex]" :list="list" :dataset="{ name: 'label1' }"
					@confirm="handleConfirm1" @cancel="handleCancel">
				</lb-picker>
			</view>
		</view>
		<wyb-table v-if="contents.length" width="710rpx" ref="table" :url-col="urlCol" first-line-fixed :default-col-width="187.5" :headers="headers"
			:contents="contents" :sort-ways="sortWays" />
			<view v-else>
				<van-empty description="暂无统计"></van-empty>
			</view>
	</view>
</template>

<script>
	import LbPicker from '@/components/lb-picker'
	import dayjs from 'dayjs'
	import wybTable from '@/components/wyb-table/wyb-table.vue'
	export default {
		components: {
			wybTable,
			LbPicker
		},
		data() {
			return {
				levelType: [2, 2, 1],
				modeType: ['multiSelector', 'multiSelector', 'selector'],
				currentIndex: 0,
				label: '请选择考核工作',
				label1: '请选择时间范围',
				assessList: [],
				list: [],
				value: '',
				value1: null,
				params: {
					考核id: null,
					// 社区id: this.$config.groupId,
					维度: 2,
					创建时间开始: null,
					创建时间结束: null,
					pagination: {
						current: 1,
						pageSize: 10
					},
					sorter: {
						field: "id",
						order: 0
					}
				},
				params1: {
					开始时间: null,
					结束时间: null,
					项目id: null,
					社区id: 36,
					考核id: null,
					// 内容id: 3,
					pagination: {
						current: 1,
						pageSize: 100
					},
					sorter: {
						field: "id",
						order: 0
					}
				},
				headers: [{
					label: '排名',
					key: '排名'
				}, {
					label: '社区',
				 key: '社区'
				}, {
					label: '小区',
					key: '小区'
				}, {
				 label: '操作',
					key: 'url'
				}],
				urlCol: [{
					type: 'route',
					key: 'url'
				}],
				sortWays: ['inv', 'none', 'asc'],
				contents: []
			}
		},
		watch: {
			params: {
				handler: function(val, oldVal) {
					this.params1.考核id = this.params.考核id
					this.getAssessStatic().then(res => {
						this.contents = res
					})
				},
				deep: true
			}
		},
		onLoad() {
			this.initData()

			for (let i = 2021; i <= 2100; i++) {
				this.list.push({
					label: i,
					value: i,
					children: this.$type.monthList
				})
			}
		},
		methods: {
			async initData() {
				this.getCurrentMonth()
				this.assessList = await this.getAssessList()
				this.params.考核id = this.assessList[0].id
				this.params1.考核id = this.assessList[0].id
				this.label = this.assessList[0].考核项目
				this.params.创建时间开始 = this.getFirstDay()
				this.params.创建时间结束 = this.getCurrentMonthLastDay()
				this.params1.开始时间 = this.getFirstDay()
				this.params1.结束时间 = this.getCurrentMonthLastDay()
				this.contents = await this.getAssessStatic()
				console.log('params', this.contents)
			},
			changeType(type) {
				if(type === this.currentIndex) {
					return
				}
				this.value1 = ''
				this.label1 = '请选择时间范围'
				this.currentIndex = type
				this.contents = []
				if (type == 0) {
					this.list.forEach(item => {
						item.children = this.$type.monthList
					})
				} else if (type == 1) {
					this.list.forEach(item => {
						item.children = this.$type.seasonList
					})
				}
			},
			getAssessList() {
				return new Promise((resolve, reject) => {
					this.$http2.post('transactionCompete/assessmentManagement/list', this.params).then(res => {
						if (res.code === 10000) {
							console.log(res)
							res.data.list.forEach(item => {
								item.label = item.考核项目
								item.value = item.id
							})
							resolve(res.data.list)

						}
					})
				})
			},
			getAssessStatic() {
				uni.showLoading()
				return new Promise((resolve, reject) => {
					this.$http2.post('/transactionCompete/assessmentFactSheetlist', this.params).then(res => {
						if (res.code === 10000) {
							res.data.list.forEach(item => {
								item.url = ['详情', '/assessSystem/staticDetail/staticDetail?item=' +
									JSON.stringify(this.params1) + '&projId=' + item.小区id
								]
							})
							resolve(res.data.list)
						}
					})
				})

			},

			handleTap(name) {
				this.$refs[name].show()
			},
			handleConfirm(e) {
				// 如果存在多个picker，可以在picker上设置dataset属性，confirm中获取，就能区分是哪个picker了
				console.log('confirm::', e)
				if (e) {
					const name = e.dataset.name
					const label = e.item.label
					if (name && label) {
						this[name] = label
					}
				}
			},
			handleConfirm1(e) {
				// 如果存在多个picker，可以在picker上设置dataset属性，confirm中获取，就能区分是哪个picker了
				console.log('confirm::', e)
				if (e) {
					const name = e.dataset.name
					const label = this.currentIndex == 2 ? e.item.label : e.item.map(m => m.label).join('-')
					// const label = e.item.map(m => m.label).join('-')
					var startArr = []
					var endArr = []
					if(this.currentIndex === 0) {
						startArr = [e.value[0], e.value[1] - 1, 1, 0, 0, 0]
						endArr = [e.value[0], e.value[1], 0, 23, 59, 59, 999]
					}else if(this.currentIndex === 1) {
						startArr = [e.value[0], (e.value[1] - 1) * 3, 1, 0, 0, 0]
						endArr = [e.value[0], e.value[1] * 3, 0, 23, 59, 59, 999]
					}else if(this.currentIndex === 2) {
						startArr = [e.value, 0, 1, 0, 0, 0]
						endArr = [e.value, 11, 31, 23, 59, 59, 999]
					}
					this.params.创建时间开始 = dayjs(new Date(...startArr)).format('YYYY-MM-DDTHH:mm:ssZ')
					this.params.创建时间结束 = dayjs(new Date(...endArr)).format('YYYY-MM-DDTHH:mm:ssZ')
					this.params1.开始时间 = dayjs(new Date(...startArr)).format('YYYY-MM-DDTHH:mm:ssZ')
					this.params1.结束时间 = dayjs(new Date(...endArr)).format('YYYY-MM-DDTHH:mm:ssZ')
					if (name && label) {
						this[name] = label
					}

				}
			},
			getFirstDay() {
				let firstDay = new Date()
				firstDay.setDate(1);
				firstDay.setHours(0);
				firstDay.setSeconds(0);
				firstDay.setMinutes(0);
				return dayjs(firstDay).format('YYYY-MM-DDTHH:mm:ssZ')
			},
			getCurrentMonthLastDay() {
				var current = new Date();
				var currentMonth = current.getMonth();
				var nextMonth = ++currentMonth;
				var nextMonthDayOne = new Date(current.getFullYear(), nextMonth, 1);
				var minusDate = 1000;
				var lastDay = new Date(nextMonthDayOne.getTime() - minusDate);
				return dayjs(lastDay).format('YYYY-MM-DDTHH:mm:ssZ')
			},
			getCurrentMonth() {
				let current = new Date()
				this.value1 = [current.getFullYear(), current.getMonth() + 1]
				this.label1 = [current.getFullYear(), current.getMonth() + 1].join('-')
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '../../style/input.scss';
	/deep/.wyb-table-scroll-view {
		margin-left: 20rpx;
	}
	.tag-box {
		display: flex;
		width: 300rpx;
		height: 60rpx;
		line-height: 60rpx;
	
	.tag-item {
			font-size: 28rpx;
			flex: 1;
			text-align: center;
			border: 2rpx solid #ccc;
		}

		.active {
			color: #fff;
			background-color: #1152FC;
		}
	}
</style>
